<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/theme/style.css">
    <link rel="stylesheet" href="../../lib/iconfont/iconfont.css">
    <script src="../../lib/js/iscroll.js"></script>

    <style>
        #wrapper {
            position: relative;
            width: 100%;
            /* height: 100vh; */
            overflow: hidden;
            /* Prevent native touch events on Windows */
            -ms-touch-action: none;
            /* Prevent the callout on tap-hold and text selection */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            /* Prevent text resize on orientation change, useful for web-apps */
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        }
        
        #scroller {
            position: absolute;
            /* Prevent elements to be highlighted on tap */
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            /* Put the scroller into the HW Compositing layer right from the start */
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
        }
    </style>
</head>

<body onload="loaded()">

    <div id="wrapper" :style="{height:winHeight+'px'}">
        <div id="scroller">
            <div class="my con" style="position:relative">

                <headers :title="titles" icon="icon-setting-fill" iconcolor="#000000" bcolor="#ffdb0d"></headers>

                <div class="myHeader">
                    <img src="../../lib/image/tx.jpg" alt="">
                    <span>远远</span>
                    <span>积分:300|已上幼儿园:321天</span>
                    <a href="#">切换宝宝</a>
                </div>
                <div class="functionList">
                    <ul>
                        <li>
                            <span class="iconfont icon-printer-fill"></span>
                            <span>我的消息</span>
                            <span>99+</span>
                        </li>
                        <li>
                            <span class="iconfont icon-printer-fill"></span>
                            <span>我的学校</span>
                            <span>99+</span>
                        </li>
                        <li>
                            <span class="iconfont icon-printer-fill"></span>
                            <span>积分商城</span>
                            <span>99+</span>
                        </li>
                    </ul>
                </div>
                <menulist :title="title" :listinfo="listInfo" :gotofunction="gotoFunction"></menulist>
            </div>
        </div>
    </div>

    <script src="../../lib/js/mui.min.js"></script>
    <script src="../../lib/js/vue.min.js"></script>
    <script src="../../lib/js/jquery.min.js"></script>
    <script src="../../lib/js/assembly.js"></script>
    <script src="../../lib/js/config.js"></script>
    <script>
        var vm = new Vue({
            el: "#wrapper",
            data: {
                winHeight: window.innerHeight,
                title: '更多服务',
                titles: '我的',
                listInfo: [{
                    name: '考勤记录',
                    src: '../../lib/image/tx.jpg',
                    id: '1'
                }, {
                    name: '宝贝视频',
                    src: '../../lib/image/tx.jpg',
                    id: 'BabyVideo'
                }, {
                    name: '成长记录',
                    src: '../../lib/image/tx.jpg',
                    id: '3'
                }, {
                    name: '亲友团',
                    src: '../../lib/image/tx.jpg',
                    id: '4'
                }, {
                    name: '我的关注',
                    src: '../../lib/image/tx.jpg',
                    id: '5'
                }, {
                    name: '我的订单',
                    src: '../../lib/image/tx.jpg',
                    id: '6'
                }, {
                    name: '积分记录',
                    src: '../../lib/image/tx.jpg',
                    id: '7'
                }, {
                    name: '宝贝餐饮',
                    src: '../../lib/image/tx.jpg',
                    id: '8'
                }, ]
            },
            methods: {
                gotoFunction(e) {
                    route('../my/' + e + '.html', e, '')
                }
            },

        })
        var myScroll;

        function loaded() {
            myScroll = new IScroll('#wrapper');
        }
    </script>

</body>

</html>